<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .span {
      margin: 0 15px;
    }
    #table {
      margin: 20px;
      width: 250px;
      border: 1px solid #999;
    }
    .hero {
      display: inline-block;
      width: 60px;
      height: 22px;
      line-height: 22px;
      text-align: center;
      border-left: 1px solid #999;
      padding: 0;
    }
    .hero:first-child {
      border-left: none;
    }
    .row {
      border-bottom: 1px solid #999;
    }
    .row:nth-child(2n) {
      background-color: #f0f0f0;
    }
    .row:last-child {
      border-bottom: none;
    }
  </style>
</head>
<body>
  <div id="div1"></div>
  <table id="table"></table>
  <script>
    let txt = ``;
    for(let row = 1;row<=9; row ++) {
      for(let col = 1;col<=row; col ++) {
        txt += `<span class=span>${col} * ${row} = ${col*row}</span>`
      }
      txt += '<br>'
    }
    div1.innerHTML = txt;

    let stuArr = [
      ['宋江','卢俊义','吴用','公孙胜'],
      ['关胜','林冲','柴进','鲁智深'],
      ['孙二娘','扈三娘','顾大嫂','潘金莲'],
      ['高俅','蔡京','童贯','宋徽宗'],
    ];
    let heroText = '';
    for(let row=0;row<stuArr.length;row ++) {
      heroText += `<tr class=row>`
      for(let col=0;col<4;col ++) {
        heroText += `<td class=hero>${stuArr[row][col]}</td>`;
      }
      heroText += `</tr>`;
    }
    table.innerHTML = heroText;

      
  </script>
</body>
</html>